<script lang="ts" setup>
import { onMounted, computed, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

import dayjs from 'dayjs'
import LineArtists from '@/components/common/LineArtists.vue'
import FlexPlaylist from '@/components/common/FlexPlaylist.vue'

import { useRecommendHook } from '@/store/modules/recommend'
import { toPage } from '@/hook/routeTopage'
import { playlistType } from '@/store/modules/types'

const recommendStore = useRecommendHook()
onMounted(() => {
  recommendStore.initRanklistData()
})

const glist = computed(() => recommendStore.glist)
const qlist = computed(() => recommendStore.qlist)
const worldlist = computed(() => recommendStore.worldlist)

const colors = ref({
  19723756: '#cc154c',
  3779629: '#3ac0aa',
  2884035: '#1d8ec7',
  3778678: '#e45748'
})

const toPlaylist = (item: playlistType) => {
  toPage('playlist', { id: item.id })
}
</script>

<template>
  <div>
    <div class="rank_container">
      <div class="rank_title">官方榜</div>
      <template v-for="item in glist" :key="item.id">
        <div class="rank_item">
          <div class="rank_image" @click="toPlaylist(item)">
            <img v-lazy="item.tracks[0].al.picUrl" class="rank_gf__image" />
            <div
              class="coverImg"
              :style="{ 'background-color': colors[item.id] }"
            />
            <i class="recommend_play">
              <i class="icon-24gf-play"></i>
            </i>
            <span class="rank_tip">
              <span
                style="font-size: 32px; font-weight: 500; font-style: italic"
                >{{ item.name }}</span
              >
              <span style="font-size: 14px"
                >{{ dayjs(item.updateTime).format('MM月DD日') }}更新</span
              >
            </span>
          </div>
          <div class="rank_list">
            <template v-for="(song, index) in item.tracks" :key="index">
              <div class="rank_list__info">
                <span class="count"> {{ index + 1 }} </span>
                <span class="song_name">
                  {{ song?.name }}
                  <i
                    style="color: var(--music-link-color)"
                    v-if="song?.alia.length"
                  >
                    ({{ song?.alia[0] }})
                  </i>
                </span>
                <LineArtists :artists="song.ar" />
              </div>
            </template>
            <div class="loadMore" @click="toPlaylist(item)">
              查看更多<el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </template>
    </div>

    <div class="rank_container">
      <div class="rank_title">曲风榜</div>
      <FlexPlaylist :playlist="qlist" icon-center />
    </div>

    <div class="rank_container">
      <div class="rank_title">全球榜</div>
      <FlexPlaylist :playlist="worldlist" icon-center />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rank_title {
  font-size: 24px;
  line-height: 42px;
  color: var(--music-title-color);
  font-weight: bold;
  margin-bottom: 20px;
}

.rank_item {
  display: flex;
  margin-bottom: 20px;
  .rank_image {
    max-height: 160px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    &:hover .recommend_play {
      opacity: 1;
    }
  }
  .rank_gf__image {
    width: 160px;
    filter: blur(6px);
  }
  .coverImg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  .rank_list {
    margin-left: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rank_list__info:nth-child(2n + 1) {
      background-color: rgba(139, 139, 139, 0.05);
    }
    .rank_list__info {
      display: flex;
      font-size: 14px;
      line-height: 32px;
      justify-content: space-between;
      color: var(--music-title-color);
      border-radius: 5px;
      padding: 0 20px;
      cursor: pointer;
      span {
        color: inherit;
      }
      &:hover {
        background-color: rgba(139, 139, 139, 0.07);
      }
    }

    .count {
      width: 40px;
      text-align: left;
    }
    .rank_list__info:nth-child(1) .count,
    .rank_list__info:nth-child(2) .count,
    .rank_list__info:nth-child(3) .count {
      color: var(--music-base-color);
    }
    .song_name {
      flex: 1;
    }
  }
}
.rank_tip {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recommend_play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background-color: rgb(228, 227, 227, 0.5);
  z-index: 10;
  opacity: 0;
}
.updateTime {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 9;
  color: #cc154c;
}

.loadMore {
  font-size: 14px;
  padding: 6px 10px;
  color: var(--music-link-color);

  cursor: pointer;
  &:hover {
    color: var(--music-artist-hover-color);
  }
}
</style>
